<template>
  <van-dropdown-menu>
    <van-dropdown-item title="区域" ref="area">
      <template>
        <down-item />
      </template>
    </van-dropdown-item>
    <van-dropdown-item ref="rentType" :title-class="{active:queryObj.rentType!==null}" title="方式">
      <template>
        <van-picker
          show-toolbar
          :columns="condition.rentType"
          @cancel="showPicker = false"
          @confirm="onTypeConfirm"
          :default-index="typeIndex"
        />
      </template>
    </van-dropdown-item>
    <van-dropdown-item ref="price" title="租金" title-class="active">
      <template>
        <van-picker
          show-toolbar
          :columns="condition.price"
          @cancel="showPicker = false"
          @confirm="onRentConfirm"
          :default-index="rentIndex"
        />
      </template>
    </van-dropdown-item>
    <van-dropdown-item title="筛选"> </van-dropdown-item>
  </van-dropdown-menu>
</template>

<script>
import DownItem from './DownItem.vue'
export default {
  components: { DownItem },
  props: {
    condition: {
      type: Object
    },
    queryObj: {
      type: Object
    }
  },
  data () {
    return {
      typeIndex: 0,
      rentIndex: 0,
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州']
    }
  },

  created () {},

  methods: {
    onTypeConfirm (value, index) {
      this.typeIndex = index
      this.queryObj.rentType = value.value
      this.$refs.rentType.toggle()
    },
    onRentConfirm (value, index) {
      this.rentIndex = index
      this.queryObj.price = value.value
      this.$refs.price.toggle()
    }
  }
}
</script>

<style scoped lang="less">
.active {
  color: red;
  /deep/.van-dropdown-menu__title {
    color: #21b97a;
  }
}
/deep/.van-dropdown-menu__title--active {
  color: #21b97a;
}
/deep/.van-picker {
  padding-bottom: 50px;
  .van-picker__toolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    .van-picker__confirm {
      flex: 2;
      background-color: #21b97a;
      color: #fff;
    }
    .van-picker__cancel {
      flex: 1;
      color: #21b97a;
    }
  }
}
</style>
